<template>
  <div id="top-chart3">
    <div class="top-chart3-title">近一个月新增问题机构</div>
    <dv-scroll-board :config="config" />
  </div>
</template>

<script>
export default {
  name: 'topChart3',
  data() {
    return {
      config: {
        header: ['问题类型', '机构名称', '日期'],
        data: [
          [
            '<span class="chaojg">超职数</span>',
            '<span>柳州市第一职业技术学校</span>',
            '<span>2022-09-01</span>'
          ],
          [
            '<span class="chaobz">超编制</span>',
            '<span>南宁市兴宁区农业农村局</span>',
            '<span>2022-09-01</span>'
          ],
          [
            '<span class="chaozs">超职数</span>',
            '<span>南宁市兴宁区三塘镇四塘卫生院</span>',
            '<span>2022-09-05</span>'
          ],
          [
            '<span class="chaozs">超编制</span>',
            '<span>南宁市兴宁区林业服务中心</span>',
            '<span>2022-09-07</span>'
          ],
          [
            '<span class="chaobz">超机构</span>',
            '<span>柳州市城中区住房和城乡建设服务中心</span>',
            '<span>2022-09-07</span>'
          ],
          [
            '<span class="chaobz">超职数</span>',
            '<span>柳州市城中区市场监督管理局</span>',
            '<span>2022-09-10</span>'
          ],
          [
            '<span class="chaobz">超编制</span>',
            '<span>柳州市城中区环境卫生管理所</span>',
            '<span>2022-09-10</span>'
          ],
          [
            '<span class="chaojg">超职数</span>',
            '<span>广西桂林市秀峰区民政局</span>',
            '<span>2022-09-13</span>'
          ],
          [
            '<span class="chaobz">超职数</span>',
            '<span>梧州市商贸物流园区管理委员会</span>',
            '<span>2022-09-15</span>'
          ],
          [
            '<span class="chaobz">超编制</span>',
            '<span>梧州职业学院</span>',
            '<span>2022-09-15</span>'
          ],
          [
            '<span class="chaobz">超职数</span>',
            '<span>广西北海市住房公积金管理中心</span>',
            '<span>2022-09-18</span>'
          ],
          [
            '<span class="chaobz">超职数</span>',
            '<span>广西北海市机关后勤服务中心</span>',
            '<span>2022-09-18</span>'
          ],
          [
            '<span class="chaobz">超编制</span>',
            '<span>防城港市港口区粮食和物资储备中心</span>',
            '<span>2022-09-21</span>'
          ],
          [
            '<span class="chaobz">超编制</span>',
            '<span>钦州市钦南区统计局</span>',
            '<span>2022-09-21</span>'
          ],
          [
            '<span class="chaobz">超编制</span>',
            '<span>贵港市港北区招商促进局</span>',
            '<span>2022-09-21</span>'
          ]
        ],
        index: true,
        columnWidth: [50, 100, 400, 130],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 0,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      }
    }
  }
}
</script>

<style lang="scss">
#top-chart3 {
  width: calc(40% - 15px);
  margin-right: 15px;
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .top-chart3-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }

  .chaojg {
    font-size: 15px;
    padding: 3px 8px;
    background-color: #FF6347;
    border-radius: 10px;
  }

  .chaobz {
    font-size: 15px;
    padding: 3px 8px;
    background-color: #FF7F24;
    border-radius: 10px;
  }

  .chaozs {
    font-size: 15px;
    padding: 3px 8px;
    background-color: #6A5ACD;
    border-radius: 10px;
  }
}
</style>
